<template>
  <div>
    <!-- 绑定事件,不需要参数  -->
    <h1 @click="addEvent">{{ num }}</h1>
    <!-- 直接处理表达式 -->
    <h1 @click="num+=2">{{ num }}</h1>
    <!-- 传递参数-->
    <h1 @click="addNumEvent(10)">{{ num }}</h1>
    <!-- 传递参数和事件对象   -->
    <h1 @click="addNumEvent1(20,$event)">{{ num }}</h1>
    <!-- 传递参数和事件对象
        v-on 全称指令
        @ 缩写指令
    -->
    <h1 v-on:click="addNumEvent1(20,$event)">{{ num }}</h1>
    <!-- 一个事件绑定 -->
    <h1 :style="{background:color}" v-on:click="addNumEvent1(20,$event),changeColor()">{{ num }}</h1>

    <!-- 事件的修饰符 -->
    <!--
      阻止事件的冒泡 .stop
      阻止默认 .prevent
      事件只会触发一次 .once
    -->
    <h1 v-on:click.once="addNumEvent1(20,$event)">{{ num }}</h1>
    <!--
      按键修饰符
      enter/tab/delete/esc/space/up/down/left/right
      系统修饰符
      .ctrl/alt/shift/meta
      鼠标修饰符
      left/right/middle
    -->
    <input type="text" @keydown.enter="searchEvent">

  </div>
</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      num: 0,
      color: 'red'
    }
  },
  methods: {
    addEvent(event) {
      console.log(event)
      this.num += 2
    },
    addNumEvent(number) {
      this.num += number
    },
    addNumEvent1(number, event) {
      console.log(event)
      this.num += number
    },
    changeColor() {
      this.color = 'skyblue'
    },
    searchEvent() {
      console.log('执行了回车')
    }
  }
}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>